<template>
  <div style="text-align:right;padding: 15px">

    <a-button type="primary" @click="editUserInfo">

      <template #icon>
        <EditOutlined/>
      </template>
      {{ $t('编辑信息') }}
    </a-button>
  </div>
  <a-collapse v-model:activeKey="activeKey" style="margin-bottom:80px;">
    <a-collapse-panel v-for="item in collapseList" :key="item.key" :header="item.title">
      <component :is="item.components" :userInfo="userInfo"></component>
    </a-collapse-panel>
  </a-collapse>
  <div style="margin:0 auto;z-index: 999;width: 450px">
    <a-affix :offset-bottom="20">
      <div class="contract_btn">
        <a-button type="primary" style="margin-right: 50px" @click="examineVisible = true,getSelect()"
                  v-show="loanDetails.orderStatus === 4 && (loanDetails.paymentStatus === 3 || loanDetails.paymentStatus === 5)">
          {{ $t('审核') }}
        </a-button>
        <a-button :href="loanDetails.contractUrl" type="link">{{ $t('查看合同') }}</a-button>
      </div>
    </a-affix>
  </div>
  <a-modal v-model:visible="examineVisible" :title="$t('审核')" width="600px" @ok="examineConfirm">
    <a-form :label-col="{span:4,}">
      <a-form-item :label="$t('审核结果')">
        {{ examineReasonText }}
      </a-form-item>
      <a-form-item :label="$t('失败原因')">
        {{ failReasonText }}
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="userInfoVisible" :title="$t('编辑用户信息')" width="600px" @ok="editUserInfoConfirm">
    <a-form layout="vertical">
      <a-form-item :label="$t('姓名')">
        <a-input v-model:value="updateUserForm.name"/>
      </a-form-item>
      <a-form-item :label="$t('身份证号码')">
        <a-input v-model:value="updateUserForm.idcard"/>
      </a-form-item>
      <a-form-item :label="$t('贷款用途')">
        <a-select v-model:value="updateUserForm.loanUse">
          <a-select-option v-for="item in loanUseColumns" :key="item.value" :value="item.value">{{
              item.value
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('学历')">
        <a-select v-model:value="updateUserForm.degree">
          <a-select-option v-for="item in educationColumns" :key="item.value" :value="item.value">{{
              item.value
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('公司名称')">
        <a-input v-model:value="updateUserForm.companyName"/>
      </a-form-item>
      <a-form-item :label="$t('身份')">
        <a-select v-model:value="updateUserForm.workType">
          <a-select-option v-for="item in categoryColumns" :key="item.value" :value="item.value">{{
              item.value
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('每月净收入')">
        <a-select v-model:value="updateUserForm.incomeNum">
          <a-select-option v-for="item in incomeColumns" :key="item.value" :value="item.value">{{
              item.value
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('电子邮箱')">
        <a-input v-model:value="updateUserForm.mail"/>
      </a-form-item>
      <a-form-item :label="$t('婚姻状况')">
        <a-select v-model:value="updateUserForm.maritalStatus">
          <a-select-option v-for="item in marriageColumns" :key="item.value" :value="item.value">{{
              item.value
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="$t('孩子')">
        <a-select v-model:value="updateUserForm.childrenNum">
          <a-select-option v-for="item in childColumns" :key="item.value" :value="item.value">{{
              item.value
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
// 身份信息
import IdentityInfo from "./components/identityInfo/index";
// 贷款问卷
import Questionnaire from "./components/questionnaire/index";
//基本信息
import BasicInfo from "./components/basicInfo/index";
//银行卡信息
import BankCardInfo from "./components/bankCardInfo/index";
// 贷款详情
import LoanDetails from "./components/loanDetails/index";
// 各阶段缴费比例
import PaymentRate from "./components/paymentRate/index";
// 用户反馈
import Feedback from "./components/feedback/index";
import {hasPermission} from '@/utils'
import {onMounted, reactive, ref} from "vue";
import locale from "@/locale";
import {useRoute} from "vue-router"
import {getOrderDetailsUserInfo, getOrderDetails, orderExamine, getAuditList, updateUserPhone} from "@/api/order"
import {message} from "ant-design-vue"
import {EditOutlined} from "@ant-design/icons-vue"
import {
  loanUseColumns,
  educationColumns,
  categoryColumns,
  marriageColumns,
  childColumns,
  incomeColumns,
  relationColumns
} from "./selectList"

const {t} = locale.global
const collapseList = [
  {title: t('身份信息'), key: '1', components: IdentityInfo},
  // {title: t('贷款问卷'), key: '2', components: Questionnaire},
  {
    title: t('基本信息'), key: '3', components: BasicInfo,
  },
  {title: t('银行卡信息'), key: '4', components: BankCardInfo},
  {title: t('贷款详情'), key: '5', components: LoanDetails},
  {title: t('各阶段缴费比例'), key: '6', components: PaymentRate},
  {title: t('用户反馈'), key: '7', components: Feedback},
]
export default {
  name: "index",
  components: {
    IdentityInfo,
    Questionnaire,
    BasicInfo,
    BankCardInfo,
    LoanDetails,
    PaymentRate,
    Feedback,
    EditOutlined
  },
  setup() {
    const activeKey = ref(['1', '2', '3', '4', '5', '6', '7'])
    const containerRef = ref();
    const failReasonText = ref(null)
    const route = useRoute()
    const userInfo = reactive({})
    const examineVisible = ref(false)
    const userInfoVisible = ref(false)
    const updateUserForm = ref({})
    const {t} = locale.global
    const {loanRecordId} = route.query
    const loanDetails = ref({})
    const failReasonList = ref([])
    const failReason = ref(null)
    const examineReasonText = ref('')

    async function getUserInfo() {
      const {userId} = route.query
      const res = await getOrderDetailsUserInfo({userId})
      if (res.code === 1) {
        userInfo.value = res.data
      }
    }

    async function getDetails() {
      const res = await getOrderDetails({
        loanRecordId
      })
      if (res.code === 1) {
        loanDetails.value = res.data
        console.log(loanDetails.value)
        console.log(loanDetails.value.orderStatus === 4 && (loanDetails.value.paymentStatus === 3 || loanDetails.value.paymentStatus === 5))
        const {paymentStatus, thawAmount, accidentAmount} = res.data
        const amount = paymentStatus === 3 ? thawAmount : paymentStatus === 5 ? accidentAmount : 0
        examineReasonText.value = t('提现失败,需支付', {amount: amount})
      }
    }

    async function getSelect() {
      const text = loanDetails.value.paymentStatus === 3 ? 'La transferencia de fondos ha fallado, el expediente ha sido bloqueado. Motivo: información incorrecta proporcionada.' : 'El depósito ha fallado.Motivo: La solicitud implica altos riesgos, lo que lleva a la congelación del préstamo.'
      failReasonText.value = text
      const res = await getAuditList({
        loanRecordId
      })
      if (res.code === 1) {
        failReasonList.value = res.data
      }
    }

    async function examineConfirm() {
      const res = await orderExamine({
        loanRecordId, failDescription: failReasonText.value
      })
      if (res.code === 1) {
        message.success(t('操作成功'))
        examineVisible.value = false
      }
    }

    function editUserInfo() {
      updateUserForm.value = {...userInfo.value}
      userInfoVisible.value = true

    }

    async function editUserInfoConfirm() {
      const res = await updateUserPhone(updateUserForm.value)
      if (res.code === 1) {
        message.success(t('操作成功'))
        userInfoVisible.value = false
        updateUserForm.value = {}
        getUserInfo()
        getDetails()
      }
    }

    function isPermission(value) {
      return hasPermission('OrderDetails', value)
    }

    onMounted(() => {
      getUserInfo()
      getDetails()
    })
    return {
      getSelect,
      isPermission,
      loanDetails,
      userInfo,
      activeKey,
      collapseList,
      failReasonList,
      containerRef,
      failReason,
      examineReasonText,
      examineVisible,
      examineConfirm,
      editUserInfoConfirm,
      editUserInfo,
      userInfoVisible,
      updateUserForm,
      failReasonText,
      loanUseColumns,
      educationColumns,
      categoryColumns,
      marriageColumns,
      childColumns,
      incomeColumns,
      relationColumns
    }
  }
}
</script>

<style scoped>
.contract_btn {
  background-color: #ffffff;
  padding: 15px;
  display: flex;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}
</style>
